[자바스크립트] 스크롤 이벤트에서 스크롤 방향 알아내는 방법

Last Modified : 2020-10-29 / Created : 2019-12-16

14,163
View Count

주소 복사하기

자바스크립트에서 마우스의 스크롤 이벤트를 사용하는 경우 만약 마우스 스크롤의 방향을 알려면 어떻게 알 수 있는지 알아봅니다.

# 자바스크립트 마우스 스크롤 방향 알기

마우스 스크롤을 방향을 알기 위해서 가장 많이 사용되는 방법이 바로 스크롤 위치의 이전 값을 전역 변수로 저장하는 방법입니다.

다시 말하면 현재 스크롤 위치와 직전 스크롤 위치를 비교해 값이 커지고 있는지 아니면 작아지고 있는지 확인하여 방향을 알 수 있습니다. 이 값은 양수(+), 음수(-) 또는 0이 나타날 것입니다. 순서대로 나타내면...
1. 스크롤 이벤트가 발생하면 이 전 값을 확인
2. 이 전 값보다 커지면 스크롤이 아래 방향임
3. 이 전 값보다 작아지면 스크롤이 위 방향임
4. 방향을 확인 후 현재 스크롤 값을 계속 업데이트위 순서대로 입니다. 그럼 코드를 작성하여 알아보겠습니다.

! 마우스 스크롤 방향을 알아내는 예제

스크롤을 이동했을 때 현재 어떤 방향으로 이동하는지를 콘솔창에 출력해서 보여주는 예제를 만들었습니다. 아래코드를 실행한 뒤 스크롤을 움직이면 1 또는 -1을 출력됩니다.

window.__scrollPosition = document.documentElement.scrollTop || 0;

document.addEventListener('scroll', function() {
let _documentY = document.documentElement.scrollTop;
let _direction = _documentY - window.__scrollPosition >= 0 ? 1 : -1;
console.log(_direction); // 콘솔창에 스크롤 방향을 출력

window.__scrollPosition = _documentY; // Update scrollY
});

이제 마우스 스크롤을 위로 올려봅니다. 아래처럼 -1이 출력되죠. 반대로 스크롤을 내려면 1이 출력되게 됩니다.(아래 예제를 구현한 박스 부분을 봐주세요)

간단하게 설명하면 구현 프로세스는 아래와 같습니다.
1. scroll 이벤트를 추가한다.
2. 이벤트 객체에서 현재의 스크롤 위치 값을 구하여 변수에 저장한다.
3. 새로운 스크롤 위치 값을 얻으면서 기존에 저장했던 변수와 비교한다.
4. 값이 크거나 작을 때를 기준으로 여기서는 스크롤 이벤트의 기존 값을 전역변수로 저장했습니다. 전역변수를 사용하지 않으려면 클로저를 사용해 private 변수를 만들어 사용할 수도 있을 것입니다.

[[ 생각해 볼 부분 ]]

위의 방법은 성능상의 이슈는 고려되지 않았습니다. 이벤트는 스크롤이 이동될 때 마다 계속 발생하므로 부하가 발생할 수 있습니다. 이를 줄이기 위해서 항상 실행하지 않고 1초 단위 등의 디바운스(debounce) 값과 기능을 추가하면 더 나은 성능을 보여주게 될 것입니다.

! 위 예제 실제로 구현해보기

아래는 위 예제를 실제로 구현하고 그 결과를 아래의 박스 영역에 출력하였습니다. 스크롤을 바꾸면서 어떻게 값이 변하는지 확인할 수 있습니다. 여기까지 마우스 스크롤 방향을 알아내는 방법에 대하여 알아봤습니다.

<div class="testForm" style="width: 100px; height: 100px; border: 1px solid #000;font-size:30px;text-align:center;">0</div>

<script>
window.__scrollPosition = document.documentElement.scrollTop || 0;
document.addEventListener('scroll', function() {
let _documentY = document.documentElement.scrollTop;
let _direction = _documentY - window.__scrollPosition >= 0 ? 1 : -1;
document.querySelector('.testForm').innerText = _direction;

window.__scrollPosition = _documentY; // Update scrollY
});
</script>

스크롤 scroll

아래의 글도 찾고 계시지 않나요?

자바스크립트 ES 6에서 async await 사용하는 방법 알아보기

자바스크립트 소수점 이하의 값만 구하는 방법